<template>
  <div class="application-icon">
    <app-icon />
  </div>
</template>

<script lang="ts" setup>
import { defineAsyncComponent } from "vue"
import modules from "@/import-application"

const props = defineProps({
  path: {
    type: String,
    required: true
  }
})

const AppIcon = defineAsyncComponent(modules[`/src/application/${props.path}.vue`] as any)
</script>

<style lang="scss">
.application-icon {
  --application-icon-size: 0.4rem;
  --application-icon-border-radius: 0.08rem;
  width: var(--application-icon-size);
  height: var(--application-icon-size);
  font-size: var(--application-icon-size);
  border-radius: var(--application-icon-border-radius);
  overflow: hidden;

  svg {
    height: 0.7em;
    width: 0.7em;

    path {
      stroke-width: 3px;
    }
  }
}
</style>
